<template>
	<view class="my_container">
		<view class="my_box">
			<!-- banner -->
			<view class="banner_box">
				<view class="banner_img_box">
					<image src="/static/my/img-my-banner.png" mode="" class="banner_img"></image>
				</view>
				<view class="banner_user_box">
					<view class="user_avatar_box">
						<image :src="userInfoAvatar" mode="" class="user_avatar"></image>
					</view>
					<view class="user_info_box">
						<view class="user_title">
							{{ userInfoName }}
						</view>
					</view>
				</view>
			</view>

			<!-- 我的订单 -->
			<view class="order_box">
				<view class="order_title_box">
					<view class="left_box">
						<view class="order_line"></view>
						<view class="order_title">
							我的订单
						</view>
					</view>
					<view class="right_box">
						<view class="order_all" @click="handlerIcon(orderIconAll)">
							全部
						</view>
						<view class="order_arrow">
							<image src="/static/my/icon-arrow.png" mode="" class="order_arrow_img"></image>
						</view>
					</view>
				</view>

				<view class="order_icon_box">
					<view class="order_icon_all" v-for="item in orderIconList" :key="item.id"
						@click="handlerIcon(item)">
						<view class="icon_order_box">
							<image :src="item.img" mode="" class="icon_order"></image>
						</view>
						<view class="icon_title">
							{{ item.name }}
						</view>
					</view>
				</view>

				<!-- 客服图标 -->
				<!-- <view class="custom_icon_box" v-if="isShowCustom">
					<view class="custom_icon_all">
						<image src="/static/my/img-custom.png" mode="" class="custom_icon"></image>
					</view>
					<view class="custom_btn_box">
						<view class="">
							<button type="primary" size="mini" open-type="openProfile" user="449939617"
								class="custom_btn">客</button>
						</view>
					</view>
				</view> -->

				<!-- <view class="custom_btn_box" v-if="isShowCustom">
					<view class="custom_img_box">
						<image src="/static/my/img-service.png" mode="widthFix" class="custom_img"></image>
					</view>
					<view class="">
						<button type="primary" size="mini" open-type="openProfile" user="449939617"
							class="custom_btn">关注服务号</button>
					</view>
				</view> -->
			</view>


		</view>

		<!-- 一键登录弹窗 -->
		<view class="popup_login_box" v-if="showLogin">
			<view class="login_title">
				请先一键登录
			</view>
			<view class="login_btn" @click="handlerLogin">
				一键登录
			</view>

			<view class="popup_close_box" @click="handlerClose">
				<image src="/static/home/icon-cancel.png" mode="" class="popup_close"></image>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" v-if="showLogin" @click="handlerClose"></view>
	</view>
</template>

<script>
	import imgUrl from '@/utils/image.js'
	export default {
		data() {
			return {
				orderIconAll: {
					id: 0,
					img: '/static/my/icon-obligation.png',
					name: '待开卡'
				},
				orderIconList: [{
						id: 1,
						img: '/static/my/icon-obligation.png',
						name: '待开卡'
					},
					{
						id: 2,
						img: '/static/my/icon-activating.png',
						name: '开卡中'
					},
					{
						id: 3,
						img: '/static/my/icon-shipped.png',
						name: '开卡失败'
					},
					{
						id: 4,
						img: '/static/my/icon-fail.png',
						name: '已发货'
					},
				],
				appId: 'ks697213517937611366',
				secret: 'Cw9FGS5TbboBa8Zgb_ZvQQ',
				userInfoAvatar: '/static/my/img-avatar.png',
				userInfoName: '',
				imageUrl: '',
				kefuNum: '', // 客服抖音号
				showLogin: false,
				isShowCustom: false
			}
		},
		onShow() {
			this.getCustom()
			this.imageUrl = imgUrl
		},
		onLoad() {
			// if(!uni.getStorageSync('openId')) {
			// 	this.isShowCustom = false
			// }
			this.getUserInfo()
		},
		methods: {
			// 获取客服
			getCustom() {
				this.$request('/kefu', {
					app_id: this.appId
				}, 'GET').then(res => {
					if (res.code == 1) {
						this.kefuNum = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 登录
			getLogin() {
				const that = this
				this.$request('/ksLogin', {
					code: this.userCode,
					appid: this.appId,
					secret: this.secret
				}, 'POST').then(res => {
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					uni.setStorageSync('openId', res.open_id)
					this.openId = res.open_id
					this.showLogin = false
					// that.getUserInfo()
					const userName = uni.getStorageSync('openId')
					this.userInfoName = userName.substr(0, 9)
					this.isShowCustom = true
				})
			},

			// 一键登录
			handlerLogin() {
				const that = this
				uni.login({
					force: false,
					success(res) {
						that.userCode = res.code
						that.getLogin()
					},
					fail(res) {
					},
				});
			},

			// 点击查号关闭登录弹窗
			handlerClose() {
				this.showLogin = false
			},

			getUserInfo() {
				const userName = uni.getStorageSync('openId')
				this.userInfoName = userName.substr(0, 9)
				this.isShowCustom = true
			},

			// 选择订单状态
			handlerIcon(val) {
				if (!uni.getStorageSync('openId')) {
					this.showLogin = true
					return
				}
				uni.navigateTo({
					url: '/pages/my/order/order?status=' + encodeURIComponent(JSON.stringify(val))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my_container {
		padding: 10rpx 19rpx 0;

		.my_box {

			.banner_box {
				position: relative;

				.banner_img_box {
					width: 100%;
					height: 157rpx;

					.banner_img {
						width: 100%;
						height: 100%;
					}
				}

				.banner_user_box {
					position: absolute;
					top: 50%;
					left: 41rpx;
					transform: translateY(-50%);
					display: flex;
					align-items: center;

					.user_avatar_box {
						width: 92rpx;
						height: 92rpx;
						margin-right: 34rpx;

						.user_avatar {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.user_info_box {

						.user_title {
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							padding-right: 13rpx;
						}

						.user_id {
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}
			}

			.order_box {
				position: relative;
				background: #FFFFFF;
				border: 1px solid #F6F6F6;
				box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
				border-radius: 0 0 12rpx 12rpx;

				.order_title_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 34rpx 23rpx 33rpx 0;
					border-bottom: 1px solid #F5F5F5;

					.left_box {
						display: flex;
						align-items: center;

						.order_line {
							width: 6rpx;
							height: 28rpx;
							background: #FF4B4B;
						}

						.order_title {
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #333333;
							padding-left: 33rpx;
						}
					}

					.right_box {
						display: flex;
						align-items: flex-end;

						.order_all {
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #808080;
						}

						.order_arrow {
							width: 30rpx;
							height: 30rpx;

							.order_arrow_img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.order_icon_box {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-between;
					padding: 37rpx 44rpx 543rpx;

					.order_icon_all {
						display: flex;
						flex-direction: column;
						align-items: center;

						.icon_order_box {
							width: 50rpx;
							height: 50rpx;

							.icon_order {
								width: 100%;
								height: 100%;
							}
						}

						.icon_title {
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							padding-top: 20rpx;
						}
					}
				}

				.custom_icon_box {
					position: absolute;
					bottom: 0;
					right: 0;

					.custom_icon_all {
						width: 100rpx;
						height: 100rpx;

						.custom_icon {
							width: 100%;
							height: 100%;
						}
					}

					.custom_btn_box {
						position: absolute;
						top: 0;
						right: 0;
						opacity: 0;

						.custom_btn {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
						}
					}
				}

				// .custom_btn_box {
				// 	position: relative;
				// 	display: flex;
				// 	justify-content: flex-end;
				// 	width: 100%;

				// 	.custom_img_box {
				// 		margin: 0 20rpx 20rpx 0;
				// 	}

				// 	.custom_btn {
				// 		position: absolute;
				// 		top: 0;
				// 		right: 0;
				// 		width: 200rpx;
				// 		height: 80rpx;
				// 		opacity: 0;
				// 	}
				// }
			}

		}

		.popup_login_box {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 500rpx;
			background: #fff;
			padding: 40rpx 0 30rpx;
			border-radius: 8rpx;
			z-index: 999;

			.login_title {
				font-size: 32rpx;
				color: #333;
				padding-bottom: 26rpx;
			}

			.login_btn {
				width: 340rpx;
				height: 80rpx;
				border-radius: 12rpx;
				background: #fbbf52;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
			}

			.popup_close_box {
				position: absolute;
				top: -68rpx;
				right: 0;
				width: 50rpx;
				height: 50rpx;

				.popup_close {
					width: 100%;
					height: 100%;
				}
			}
		}

		.mask {
			background-color: rgba(0, 0, 0, 0.7);
			/* 使用固定定位让元素撑满全屏 */
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
</style>